<template>
    <div id="addclassify">
        <PageTitle>添加分类</PageTitle>
        <div class="pages-top pages-scroll-two">
            <div id="classify-input">
                <input class="input-css" type="text" placeholder="分类名称" v-model="classifyName">
                <input class="input-css" type="text" placeholder="茶名" v-model="teaName">
                <div class="tea-img">
                    <label for="file-selector"><img ref="fileimg" id="file-img" src="../../static/icon/添加.svg"></label>
                    <input type="file" id="file-selector" accept="image/*" multiple @change="imgChange">
                </div>
                <button class="button-css" @click="classifyClick">提交</button>
            </div>
        </div>
    </div>
</template>
<script>
import PageTitle from "../components/PageTitle.vue";
export default {
    components:{PageTitle},
    
    data(){
        return {
            classifyName:"",
            teaName:"",
            files:[],
        }
    },
    methods:{
        imgChange(e){
            this.files = e.target.files[0];
            var url = URL.createObjectURL(e.target.files[0]);
            this.$refs.fileimg.src = url;
            
        },
        classifyClick(){
            var data = new FormData();
            data.append("tea",this.files);
            data.append("classifyName",this.classifyName);
            data.append("teaName",this.teaName);
            this.$store.dispatch("requestAddClassify",data);
        }
    }
}
</script>
<style scoped>
    #addclassify{
        background-color: #F4F4F4;
        z-index: 20;
    }
    #classify-input{
        margin: 3.92vw;
    }
    #file-selector{
        display: none;
    }
    .tea-img{
        text-align: center;
        line-height: 14vw;
    }
    #file-img{
        width: 14vw;
        height: 14vw;
        border-radius: 50%;
    }
</style>